<template>
  <view class="info">
    <view class="infoHeader">
      <view class="let">
        <view class="name">{{ data.name }}</view>

        <view class="distance">
          <i class="iconfont icon-map-filling1"></i>
          <view>{{ data.distance }}</view>
        </view>
      </view>

      <view
        :class="['rig', data.is_favorite ? 'on' : '']"
        @click="Emit.$emit('handle', 'collect')"
      >
        <template v-if="!data.is_favorite">
          <i class="iconfont icon-collection"></i>
          <view>收藏</view>
        </template>
        <template v-else>
          <i class="iconfont icon-collection-fill"></i>
          <view>已收藏</view>
        </template>
      </view>
    </view>
    <view class="number">
      浏览量 {{ data.visited }} · 订单量 {{ data.order_num }} · 收藏量
      {{ data.favorite_num }}
    </view>
    <view class="des">{{ data.desc }} </view>

    <view class="tag">
      <view class="tagItem" v-if="hasShowTag(data.certified, '1')">
        <i class="iconfont icon-success"></i>
        <view class="txt">已实名认证</view>
      </view>
      <view class="tagItem" v-if="hasShowTag(data.certified, '2')">
        <i class="iconfont icon-success"></i>
        <view class="txt">已认证资质</view>
      </view>
      <view class="tagItem" v-if="hasShowTag(data.certified, '3')">
        <i class="iconfont icon-success"></i>
        <view class="txt">有照片</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return null;
      },
    },
  },

  computed: {
    hasShowTag() {
      return (str, key) => {
        return str.indexOf(key) !== -1;
      };
    },
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.info {
  margin-bottom: 24rpx;
  padding: 24rpx;
  background: #fff;
  font-size: 24rpx;
}

.infoHeader {
  display: flex;

  .let {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .distance {
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    color: #f85809;
  }

  .rig {
    display: flex;
    align-items: center;
    color: #8c8c8c;

    &.on {
      color: #f0250e;
      .icon-collection-fill {
        color: #f0250e;
      }
    }
  }

  .name {
    font-size: 32rpx;
    font-weight: bold;
    color: #262626;
  }
}

.number {
  padding: 22rpx 0 24rpx;
}

.des {
  padding-bottom: 24rpx;
  color: #8c8c8c;
  line-height: 34rpx;
}

.tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #8c8c8c;
  background: #fbfcfb;
  padding-top: 20rpx;

  .tagItem {
    display: flex;
    align-items: center;

    .txt {
      padding: 0 20rpx 0 8rpx;
    }
  }

  .iconfont {
    font-size: 22rpx;
  }
}
</style>
